<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/app.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.picker.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.dtpicker.css?01_38" />

		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		<script src="../common/js/mui.picker.min.js?01_38" type="text/javascript" charset="utf-8"></script>
		<script src="../mui/js/mui.dtpicker.js?01_38" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../common/js/jquery-validate.js?01_38"></script>
		<script src="../common/js/datePicker.js?01_38" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/my_common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
		<style type="text/css">
			.mui-dtpicker-header button {
				border: none;
			}
		</style>
	</head>

	<body>
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10  pad-r-10">
			<div class="pa back pad-l-10" onclick="cli_back_btn();">
				<a></a>
			</div>
			<div class="center" id="shop_name"></div>
		</header>
		<div class="wrap_body attendance_record" id="app" v-cloak="">
			<div class="mask bg-000 pa loading hide">
				<div class="pad-l-40 pad-r-40 pad-t-200">
					<div class="bg-fff wrap pr center ">
						<img src="../images/default_graph/animation.gif" />
					</div>
				</div>
			</div>
			<!--选择日期部分-->
			<div class="pad-t-10 calendar_wrap pad-b-10 pad-l-12 pad-r-12">
				<div class="bg-dblue fff select_date fiex calendar ">
					<div class="pad-15" @click="minus">
						<div class="left"></div>
					</div>
					<dl class="fiex1 date_option">
						<dd class="bk col-sm-5">
							<div @click="date_select" class="fr"></div>
						</dd>
						<dt class=" col-sm-6 pad-l-15 ui-alert" id='result' @click="date_select">{{date_sel}}</dt>
					</dl>
					<div class="pad-15" @click="add">
						<div class="right"></div>
					</div>
				</div>
			</div>
			<div class="content pad-l-10 pad-t-45 pad-r-10">

				<div class="pad-t-70">
					<!--考勤记录总条数大于0时，显示考勤记录-->
					<div v-if="count>0 && date_sel == item.addtime.substr(0,7)" v-for="(item,index) in list">
						<div class="info ">
							<!--只显示当前月份考勤记录-->
							<div class="item">
								<div class="bank10"></div>
								<dl class="bg-fff cf pad-15 fiex">
									<dt class="fl pad-r-15"><div class="red9 center pr"><p class="pa">{{(index+1)<10?"0"+(index+1):(index+1)}}</p></div></dt>
									<dd class="fl pad-l-20 pad-t-10 pad-b-10 cf">
										<p><span class="f-13 pad-r-5">{{b_lg[1254]}}：</span><span class="f-16 f-b blue">{{item.time}}</span></p>
										<p class="cf c999 mag-t-5 f-15 work">
											<span class="fl start"></span>
											<span class="fl pad-l-5 pad-r-10">{{item.addtime.substr(5,5)}}</span>
											<span class="fl">{{item.addtime.substr(11)}}</span>
										</p>
										<p class="cf c999 mag-t-5 f-15 leave">
											<span class="fl people"></span>
											<span class="fl pad-l-5 pad-r-10" v-if="item.endtime !='' ">{{item.endtime.substr(5,5)}}</span>
											<span class="fl pad-l-5 pad-r-10 f-14" v-else>{{b_lg[1214]}}</span>
											<span class="fl">{{item.endtime.substr(11)}}</span>
										</p>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="loading center f-18 mag-b-10" v-if="clock==0&&!isend">
						<i class="fa fa-spinner fa-pulse"></i>
					</div>
					<!--记录显示完全之后的end-->
					<div class="end end3 center c999 pad-10" :class="{hide:!isend}">- end -</div>
					<!--</template>-->

					<!--考勤记录小于1时，显示背景图-->
					<div class="center c999 f-15 no_record_info pa " v-if="list.length==0">
						<p class="record_bg"></p>
						<p>{{b_lg[1255]}}</p>
					</div>
				</div>

			</div>
		</div>

	</body>

	<script type="text/javascript">
		var app = null;

		function refresh() {
			app.init();
		}

		function cli_back_btn() {
			app.back_btn();
		}

		function fun1() {
			setlange_obj(); //加载头部语言包
			//创建vue
			app = new Vue({
				el: "#app",
				data: {
					date_sel: "",
					list: [],
					b_lg: global_lange, //语言包
					shop_name: "",
					page: 1, //当前页
					isload: false, //加载的小圆圈是否出现
					isend: false, //数据是否显示完
					total: 0, //总页数
					ajaxing: true, //请求
					count: 0,
					arr: [],
					clock:"1" //添加锁定(默认为未锁定状态)
				},
				mounted: function() {
					var th= this
					var winH = $(window).height(); //屏幕高度
					window.addEventListener('scroll', function(e) { //滚动事件
						domH = $("body").height(); //内容高度
						if((winH + $(window).scrollTop()) > domH - 10) {
							if(th.clock==1){
								th.clock= 0;
								th.getnextpage();
							}
							
						}
					}, true)
				},
				created: function() {
					this.init();
				},
				//方法
				methods: {
					init: function() {
						$("#result").bind('DOMNodeInserted', function(e) {
							alert()
						});
						this.date_sel = new Date().format("yyyy-MM")
						common_ajax(1, {
							type: 1,
							page: 0,
							pagesize: 10,
							time: this.date_sel

						}, "get_check_work", function(res) { //获取店铺信息
							app.list = res.result.list;
							app.count = res.result.count;
							app.total = res.result.total;
							common_ajax(1, {}, "get_home", function(res) { //获取店铺信息
								app.date_sel = new Date(res.result.time * 1000).format("yyyy-MM"); //时间格式化
								app.shop_name = res.result.shop_info.shop_name;
								$("#shop_name").html(app.shop_name)
							})
							if(app.list.length == 0) {
								app.isend = false;
								app.isload = false;
							} else {
								app.getList(); // 初始化
								$.each(app.list, function(i, v) {
									app.arr.push(v.addtime.substr(0, 7));
									var mon = app.arr.indexOf(app.date_sel);
									if(mon == -1) {
										app.isend = false;
										app.isload = false;
									}
								})
							}
							app.ajaxing = true
							app.isload = false
						})

					},
					//选择日期
					date_select: function() {
						app.clock= 1; 
						app.ajaxing = true
						app.page=1; //重置当前页
						var dtpicker = new mui.DtPicker({
							"type": "month",
							"beginYear": 2010,
							"endYear": 2050
						});

						dtpicker.show(function(e) {
							app.date_sel = e.text;
							app.sle_data()
						})
						app.isend = false
						app.isload = false
					},
					//日期减
					minus: function() {
						app.clock= 1; 
						app.ajaxing = true
						$(window).scrollTop(0)
						y = app.date_sel.substr(0, 4) - 0;
						m = app.date_sel.substr(5) - 0;
						if(m < 2) {
							m = 12;
							y--;
						} else {
							m--;
						}
						app.date_sel = y + "-" + (m < 10 ? "0" + m : m)
						app.sle_data()
						setTimeout(function() {
							app.page = 1
							app.isend = false
						}, 500)
					},
					//日期加
					add: function() {
						app.clock= 1; 
						app.ajaxing = true
						$(window).scrollTop()
						y = app.date_sel.substr(0, 4) - 0;
						m = app.date_sel.substr(5) - 0;
						if(m > 11) {
							m = 1;
							y++;
						} else {
							m++;
						}
						app.date_sel = y + "-" + (m < 10 ? "0" + m : m);
						app.sle_data()
						setTimeout(function() {
							app.isend = false
							app.page = 1
						}, 500)
					},
					getnextpage: function() { //获取下一页数据
						if(this.ajaxing) {
							var curpage = this.page; //赋值给中间变量
							curpage++;
							if(curpage < this.total) { //如果当前页码小于等于总页码才会加载数据
								this.page = curpage;
								this.getList();
							} else {
								app.isload = false;
								app.isend = true;
							}
						}
					},
					getList: function() {
						//加载列表数据
						common_ajax(1, {
							type: 1,
							page: this.page,
							pagesize: 10,
							time: app.date_sel
						}, "get_check_work", function(res) {
							if(res.status == 1) { //请求成功
								$.each(res.result.list, function(i, v) { //i为下标，v为元素
									app.list.push(v);
								});
								app.isend = false;
								app.isload = false;
								if(app.list.length == 0) {
									app.isload = false;
								}
							} else {
								mui.toast(res.msg);
							}
							app.ajaxing = true
							app.clock=1
						})
					},
					sle_data: function() {
						common_ajax(1, {
							type: 1,
							page: 0,
							pagesize: 10,
							time: app.date_sel

						}, "get_check_work", function(res) {
							app.list = res.result.list;
							app.count = res.result.count;
							app.total = res.result.total;
							app.loader = false
							app.clock= 1; 
						})
					},
					back_btn: function() {
						var pag = getQueryString("page")
						if(isAPP) {
							if(pag == "index") {
								var ms = plus.webview.currentWebview().opener()
								ms.evalJS("refresh(1)")
							} else {
								back()
							}
						}
						back()
					}

				}
			})
		}
	</script>

</html>
